<!-- <template>
    <div id="wrap3">
        <h1>组合式API-自定义渲染-返回函数</h1>
    </div>
</template> -->
<script lang='ts'>
import { h } from 'vue';
import studemo3 from './studemo3.vue';
export default {
    name: 'studemo9',
    setup() {
        const renderContent = () => {
            return h('div', { id: 'wrap3' }, [
                h('h1', 'setup语法糖使用自定义渲染函数'),
                h('p', 'setup语法糖内无法使用render（）函数'),
                h('button', {
                    onClick: () => {
                        alert('点击了按钮')
                    }
                }, '点击我'),
                h(studemo3)
            ])
        }
        return {
            renderContent,
        }
    },
    render() {
        //调用setup中的返回渲染函数
        return this.renderContent();
    }
}
</script>
<style>
#wrap3 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    margin-top: 20px;
    font-size: 18px;
    flex-direction: column;

    h1 {
        font-size: 50px;
        margin-bottom: 20px;
        color: rgb(243, 231, 233);
    }

    button {
        width: 100px;
        height: 50px;
        background-color: rgb(243, 231, 233);
    }
}
</style>
